<template>
    <div class="login">
        <div class="login-content">
            <div class="login-info">
                <div class="login-title">
                    用户登录
                </div>
                <div class='login-user'>
                    <p>用户名：</p>  <el-input class="inptflex" v-model="user" placeholder="Please input" clearable></el-input>
                </div>
                <div class='login-user'>
                    <p>密码：</p>  <el-input class="inptflex" v-model="passwd" placeholder="Please input" clearable></el-input>
                </div>
                <div class="reg-view">
                    <p>注册</p>
                </div>
                <div>
                    <el-button @click="Login" class="anniu" size="medium" :loading="load" type="success" >注册</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts" name="Login" >
    import {ref,reactive, toRefs,getCurrentInstance} from 'vue'
    import router from "@/router"

    
    let load = ref(false)
    let userInfo=reactive(
        {
            user:"",
            passwd:""
        }
    )
    let {user,passwd} = toRefs(userInfo)
    function Login(){
        load.value = true
        router.push('/topic')
        
    }
    
</script>
<style>
.login{
    background-image: url(@/static/beijing.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size:cover;
    min-height: 100vh;
}
.login-content{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.login-info{
    width:500px;
    height: 300px;
    background: #80cdf9;
    border-radius: 5px;
}
.login-title{
    text-align: center;
    color: #000;
    font-size: 30px;
    padding-top:30px;
    font-family: Arial, Helvetica, sans-serif;
}
.login-user{
    width: 400px;
    margin: 0 auto;
    padding-top:30px;
    height: 40px;
    display: flex;
    align-items: center;
}
.login-user p{
    width:80px;
    color: #000000;
    font-size: 16px;
    text-align: right;
}
.inptflex{
    flex:1;
}
.reg-view{
    width: 400px;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    padding-top: 10px;
}
.reg-view p{
    cursor: pointer;
    display: contents;
}
.anniu{
    color: #000;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0 auto;
    font-size: 16px;
}
</style>